<template>
	<view>
		<view class="disC">
			<view class="title">
				库存表
			</view>
			<input class="uni-input" v-model="keyword" placeholder="请输入关键词" @confirm='getTableData()' />
		</view>
		<uni-table border stripe emptyText="暂无更多数据" class="body">
			<uni-tr>
				<uni-th align="center" v-for="(item,index) in trList" :key="index">{{item.lable}}</uni-th>
			</uni-tr>
			<uni-tr v-for="(item,index) in tableList" :key="index">
				<uni-td align="center" v-for="(it,e) in trList" :key="e"
					:style="{color : it.color ? it.color : '#000'  }">
					<view class="" v-if="it.solt == 'isQueryStores'">
						{{item[it.prop] == 0 ? '否' : '是'}}
					</view>
					<view class="corB" v-else-if="it.solt == 'rule'" @click="changeruleShow(item[it.prop])">
						查看规则
					</view>
					<view :class="[item.isQueryStores == 1 ? 'corB' : '']" v-else-if="it.solt == 'showStore'"
						@click="changestoreShow(item.isQueryStores == 0,item[it.prop])">
						查看可用门店
					</view>
					<view v-else>
						{{item[it.prop]}}
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="bottom">
			<view class="detail">
				<span class="mar10 pr hide" @click.stop="isShow = true">
					<span class="corB" style="margin: 0 10px;">{{queryParams.pageSize}}</span>条/页
					<transition name="slide">
						<view class="select" v-if="isShow">
							<view :class="[queryParams.pageSize == t ? 'corB' : '','center']" v-for="(t,i) in number"
								:key="i" @click.stop="changePageSize(t)">
								<text style="margin: 0 10px;">{{t}}</text>条/页
							</view>
						</view>
					</transition>
				</span>
				<span class="mar10">共{{queryParams.total}}条</span>
			</view>
			<view class="ul">
				<span v-for="(item,index) in displayPages" :key="index" class="li" @click="changeNumber(item)"
					:class="[queryParams.pageCurrent == item ? 'corB' : '']">
					{{item}}
				</span>
			</view>
		</view>
		<view class="back" v-if="storeShow" @click.stop="storeShow = fasle">
			<view class="centent" @click.stop='ao'>
				<input class="uni-input" placeholder="请输入门店" @input.stop="changeInput" />
				<view class="box">
					<rich-text :nodes="text"></rich-text>
				</view>
			</view>
		</view>
		<view class="back" v-if="ruleShow" @click.stop="ruleShow = fasle">
			<view class="centent">
				<view class="box">
					<view class="tips">
						使用规则
					</view>
					<rich-text :nodes="ruleText"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryCountPageList
	} from '@/api.js'
	export default {
		data() {
			return {
				keyword: '',
				trList: [{
						lable: '卡种名称',
						prop: 'cardName',
					}, {
						lable: '类型',
						prop: 'cardStyleName',
					}, {
						lable: '成本价',
						prop: 'cardPrice',
					},
					{
						lable: '库存数量',
						prop: 'cardNumber',
					},
					{
						lable: '失效时间',
						prop: 'lifespan',
					},
					{
						lable: '是否需要查门店',
						prop: 'isQueryStores',
						solt: 'isQueryStores'
					},
					{
						lable: '关键字',
						prop: 'keyword',
						solt: 'keyword'
					},
					{
						lable: '查使用规则',
						prop: 'remarks',
						solt: 'rule'
					},
					{
						lable: '查门店',
						prop: 'stores',
						solt: 'showStore'
					},
				],
				tableList: [],
				queryParams: {
					pageSize: 10,
					total: 0,
					pageCurrent: 1,
					pageCount: 100,
				},
				number: [10, 20, 30, 50],
				isShow: false,
				templateText: '', //模板字符串
				text: '', //处理后的字符串
				ruleText: '',
				storeShow: false,
				ruleShow: false,
			}
		},
		created() {
			this.getTableData()
		},
		methods: {
			ao() {},
			changeInput(e) {

				let str = e.detail.value
				if (str) {
					const regex = new RegExp(`(${str})`, 'gi');
					const text = this.templateText;
					this.text = text.replace(regex, '<span style="color:red;">$1</span>');
				} else {
					this.text = this.templateText;
				}


			},
			changeruleShow(text) {
				this.ruleText = text ? text : ''
				this.ruleShow = true
			},
			changestoreShow(state, text) {
				if (state) {
					// 不需要查看门店
					return
				}
				this.storeShow = true
				this.templateText = text ? text : ''
				this.text = text ? text : ''

			},
			changePageSize(t) {
				this.isShow = false
				this.queryParams.pageSize = t
				this.queryParams.pageCurrent = 1
				this.getTableData()

			},
			changeNumber(e) {
				if (e === '...') {
					return
				}
				this.queryParams.pageCurrent = e
				this.getTableData()
			},
			async getTableData() {
				let res = await queryCountPageList({
					pageNo: this.queryParams.pageCurrent,
					pageSize: this.queryParams.pageSize,
					keyword: this.keyword
				})
				this.queryParams.total = res.result.total
				this.queryParams.pageCount = res.result.pages
				this.tableList = res.result.records

			},
		},

		computed: {
			displayPages() {
				const count = this.queryParams.pageCount;
				const current = this.queryParams.pageCurrent
				console.log('count', count);
				console.log('current', current);
				if (count <= 6) {
					console.log('1');
					return Array.from({
						length: count
					}, (_, i) => i + 1);
				} else if (count > 9) {
					if (current > 3 && current < count - 3) {
						console.log('2');
						return [
							1, '...', , current - 1, current, current + 1, '...', count
						]
					} else if (current <= 3) {
						console.log('3');
						return [
							1, 2, 3, 4, '...', count - 1, count
						]
					} else if (current >= count - 3) {
						console.log('4');
						return [
							1, 2, '...', count - 3, count - 2, count - 1, count
						]
					}
				} else {
					if (current < 3 && current > count - 3) {
						console.log('5');
						return [
							1, 2, 3, '...', count - 3, count - 2, count - 1, count
						]
					} else if (current <= 3) {
						console.log('6');
						return [
							1, 2, 3, 4, '...', count - 1, count
						]
					} else if (current >= count - 3) {
						console.log('7');
						return [
							1, 2, '...', count - 3, count - 2, count - 1, count
						]
					}
				}
			}
		},

	}
</script>

<style scoped lang="scss">
	.body {
		padding: 10px;
		box-sizing: border-box;
		height: calc(100vh - 60px - 100px);
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100px;

		background: #f5f7fa;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.detail {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: flex-end;
	}

	.mar10 {
		margin: 0 4px;
	}

	.corB {
		color: #409eff;
	}

	.ul {
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: flex;
		/* flex-direction: row-reverse; */
		justify-content: flex-end;


	}

	.li {
		margin: 0 14px;
	}

	.pr {
		position: relative;
	}

	.select {
		position: absolute;
		top: -160px;
		width: 100px;
		height: 160px;
		border: 1px solid #409eff;
		background: #fff;
	}

	.slide-enter-active,
	.slide-leave-active {

		transition: all 0.3s ease;

	}

	.slide-enter,
	.slide-leave-to {

		opacity: 0;

		transform: translateY(-10px);

	}

	.center {
		text-align: center;
	}

	.title {
		text-align: center;
		padding: 20px 10px;
		font-weight: 600;
		font-size: 32rpx;
	}

	.back {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.centent {
		width: 90%;
		min-height: 60vh;
		max-height: 80vh;
		background: white;
		padding: 24px;
		box-sizing: border-box;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

		animation: modalSlideIn 0.3s ease-out;
	}

	.uni-input {
		padding: 10px 10px;
	}

	.box {
		padding: 0 10px;
		max-height: 60vh;
		overflow-y: scroll;

	}

	.tips {
		width: 100%;
		text-align: center;
		font-weight: 600;
		margin: 10px 0;
	}

	.disC {
		display: flex;
		justify-content: space-around;
		align-items: center;

	}
</style>